<template>
	<view>
		<view class="customer-container">
			<u-avatar :src="photo" mode="square"></u-avatar>
			<view class="info">
				<view class="customer-name">{{ name }}（司机）</view>
				<view class="customer-tel">Tel：{{ tel }}</view>
			</view>
		</view>
		<view class="address-container">
			<view class="from">
				<text>{{ startPlace }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to">
				<text>{{ endPlace }}</text>
			</view>
		</view>
		<view class="order-container">
			<view>【 订单号码 】 {{ orderId }}</view>
			<view>【 下单时间 】 {{ createTime }}</view>
			<view>【 客户红包 】 {{ favourFee }}元</view>
			<view>【 系统奖励 】 {{ incentiveFee }}元</view>
			<view>【 驾驶车型 】 {{ carType }}</view>
			<view>【 驾驶车牌 】 {{ carPlate }}</view>
		</view>
		<view>
			<view class="setion-title">
				<image src="../../static/order/money.png" mode="widthFix"></image>
				<text>基础收费</text>
			</view>
			<view class="section-content">
				<view class="item">
					<view class="left">
						<text class="item-title">里程费（{{ realMileage }}公里）</text>
						<text class="item-desc">时段收费（{{ baseMileagePrice }}元{{ baseMileage }}公里，超出每公里{{ exceedMileagePrice }}元）</text>
					</view>
					<view class="right">{{ mileageFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">时长费（{{ waitingMinute }}分钟）</text>
						<text class="item-desc">免费{{ base_minute }}分钟，超出部分每分钟{{ exceedMinutePrice }}元</text>
					</view>
					<view class="right">{{ waitingFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">返程费（{{ returnMileage }}公里）</text>
						<text class="item-desc">总里程超过{{ baseReturnMileage }}公里，每公里{{ exceedReturnPrice }}元</text>
					</view>
					<view class="right">{{ returnFee }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="setion-title">
				<image src="../../static/order/money.png" mode="widthFix"></image>
				<text>额外收费</text>
			</view>
			<view class="section-content">
				<view class="item">
					<view class="left">
						<text class="item-title">停车费</text>
						<text class="item-desc">如果司机预付停车费，该费用将计入订单费用</text>
					</view>
					<view class="right">{{ parkingFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">路桥费</text>
						<text class="item-desc">如果司机预付停车费，该费用将计入订单费用</text>
					</view>
					<view class="right">{{ tollFee }}</view>
				</view>
				<view class="item">
					<view class="left">
						<text class="item-title">其他费用</text>
						<text class="item-desc">行程过程中产生的其他费用</text>
					</view>
					<view class="right">{{ otherFee }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="setion-title">
				<image src="../../static/order/money.png" mode="widthFix"></image>
				<text>总金额</text>
			</view>
			<view class="section-content">
				<view class="content-container">
					<view class="left">
						<view class="content">
							【汇总合计】
							<text>¥ {{ total }} 元</text>
						</view>
						<view class="content">
							【减免金额】
							<text v-if="status == 6">¥ {{ useVoucher.discount }} 元</text>
							<text v-if="status != 6">¥ {{ voucherFee }} 元</text>
						</view>
						<view class="content">
							【实付金额】
							<text class="red">¥ {{ realPay }} 元</text>
						</view>
					</view>
					<image :src="img" mode="widthFix" class="img"></image>
				</view>
			</view>
		</view>

		<view class="operate-container" v-if="status == 6">
			<button class="btn" @tap="payHandle">立即付款</button>
			<!-- 余额支付输入密码 -->
			<u-keyboard 
				default="" 
				ref="uKeyboard" 
				mode="number" 
				:mask="true" 
				:mask-close-able="false" 
				:dot-enabled="false"
				v-model="paypasswordShow" 
				:safe-area-inset-bottom="true" 
				:tooltip="false"
				@change="onChange"
				@backspace="onBackspace">
				<view>
					<view class="money">
						<text>￥{{realPay}}</text>
						<view class="close" data-flag="false" @tap="showPop(false,'','')">
							<u-icon name="close" color="#333333" size="40"></u-icon>
						</view>
					</view>
					<view>
						<u-message-input 
							mode="box" 
							:maxlength="6" 
							:dot-fill="true" 
							v-model="paypassword"
							:disabled-keyboard="true">
						</u-message-input>
					</view>
					<view class="tips">请输入钱包密码</view>
				</view>
			</u-keyboard>
		</view>
		<view v-if="status >= 7">
			<view class="setion-title">
				<image src="../../static/order/rate.png" mode="widthFix"></image>
				<text>客户评价</text>
			</view>
			<view class="section-content">
				<view class="remark-container">
					<view class="remark-rate">
						<view class="photo">
							<u-avatar :src="photo" size="60" />
						</view>
						<view class="rate">
							<u-rate :count="customerComment.count" 
									v-model="customerComment.value" disabled="true" 
									active-color="#FFBB2A" size="40" />
						</view>
					</view>
					<view class="remark">{{ customerComment.remark }}</view>
				</view>
			</view>
		</view>

		<view class="contact-container">
			<view class="contact">
				<text class="label">客服电话：</text>
				<text class="tel">0411-87143331</text>
			</view>
			<view class="contact">
				<text class="label">服务监督电话：</text>
				<text class="tel">0411-87143331</text>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-popup v-model="comment.showComment" mode="center" 
				border-radius="14" width="550rpx" height="580rpx">
			<view class="comment-title">随行打车的服务您满意吗</view>
			<view class="comment-desc">请给司机的服务一点评价吧~</view>
			<view class="comment-rate">
				<u-rate :count="comment.count" v-model="comment.value" min-count="1"
						active-color="#FFBB2A" size="40" @change="handleRateChange">
				</u-rate>
			</view>
			<u-input v-model="comment.remark" type="textarea" :border="false"
					:clearable="false" placeholder="说说哪里好,其他顾客想知道~" 
					:custom-style="comment.remarkStyle" />
			<u-button type="success" :custom-style="comment.btnStyle" 
						@click="insertComment">确定</u-button>
		</u-popup>
	</view>
</template>

<script>
let dayjs = require('dayjs');
var customParseFormat = require('dayjs/plugin/customParseFormat')
export default {
	data() {
		return {
			useVoucher: {
				id: null,
				discount: 0,
				voucherId: null
			},
			paypassword: '',
			paypasswordShow: false,
			orderId: null,
			customerId: null,
			driverId: null,
			photo: null,
			name: null,
			tel: null,
			startPlace: null,
			endPlace: null,
			createTime: null,
			favourFee: '暂无',
			incentiveFee: '暂无',
			carPlate: null,
			carType: null,
			status: null,
			realMileage: null,
			mileageFee: null,
			baseMileagePrice: '',
			baseMileage: '',
			exceedMileagePrice: '',
			waitingFee: '暂无',
			base_minute: '',
			waitingMinute: '--',
			exceedMinutePrice: '',
			returnFee: '暂无',
			baseReturnMileage: '',
			exceedReturnPrice: '',
			returnMileage: '--',
			parkingFee: '暂无',
			tollFee: '暂无',
			otherFee: '暂无',
			total: '--',
			voucherFee: '--',
			realPay: '--',
			img: '',
			comment: {
				showComment: false,
				placeholder: '',
				count: 5,
				value: 0,
				remark: null,
				remarkStyle: {
					'background-color': '#f8f8f8',
					padding: '20rpx',
					margin: '0 40rpx'
				},
				btnStyle: {
					margin: '40rpx 40rpx 30rpx 40rpx'
				}
			},
			customerComment: {
				count: 5,
				rate: 0,
				remark: '[ 客户没有评价，系统默认为好评~ ]'
			}
		};
	},
	methods: {
		handleRateChange:function(value){
			if(value > 3) {
				this.comment.placeholder = "说说哪里好，其他顾客想知道~" ;
			} else if(value == 3) {
				this.comment.placeholder = "或许有需要改进的地方？期待您宝贵的意见" ;
			} else if(value < 3) {
				this.comment.placeholder = "很抱歉给您带来了不好的体验，能告诉我们原因吗？";
			}
		},
		insertComment: function() {
		    let that = this;
		    if (that.comment.value == 0) {
		        uni.showToast({
		            icon: 'error',
		            title: '请给司机评分'
		        });
		        return;
		    }
		    let data = {
		        orderId: that.orderId,
		        driverId: that.driverId,
		        customerId: that.customerId,
		        rate: that.comment.value,
		        remark: that.comment.remark
		    };
		    that.ajax(that.url.insertComment, 'POST', data, function(resp) {
		        let rows = resp.data.rows;
		        if (rows == 1) {
		            that.comment.showComment = false;
		            uni.showToast({
		                icon: 'success',
		                title: '感谢您的评价'
		            });
		            setTimeout(function() {
		                uni.switchTab({
		                    url: '../workbench/workbench'
		                });
		            }, 1800);
		        }
		    });
		},
		showPop(flag = true, id, price) {
			this.paypassword = '';
			this.paypasswordShow = flag;
		},
		onChange(val) {
			let that = this;
			if (this.paypassword.length < 6) {
				this.paypassword += val;
			}
			if (this.paypassword.length >= 6) {
				let now = dayjs();
				dayjs.extend(customParseFormat);
				let payTime = now.format("YYYYMMDDHHmmss");
				let data = {
					payTime: payTime,
					resultCode: 'SUCCESS',
					orderId: that.orderId
				}
				if(this.paypassword != "123456") {
					uni.showToast({
						icon:'error',
						title: '密码错误',
					});
					this.paypassword = '';
					return;
				}
				this.ajax(this.url.payMessage, 'post', data, res=>{
					if(res.data.code == 200) {
						uni.showToast({
							icon:'success',
							title: '付款成功',
						});
						//这段代码是新添加的
						setTimeout(function() {
							that.comment.showComment = true;
						}, 1700);
					} else {
						uni.showToast({
							icon:'error',
							title: '失败，' + res.data.msg,
						});
					}
					
				})
				that.showPop(false);
			}
		},
		onBackspace(e) {
			if (this.paypassword.length > 0) {
				this.paypassword = this.paypassword.substring(0, this.paypassword.length - 1);
			}
		},
		payHandle: function() {
		    let that = this;
		    let data = {
		        orderId: that.orderId,
				voucherId: that.useVoucher.voucherId,
				customerVoucherId: that.useVoucher.id
		    };
			if(that.voucher != undefined) {
				data.customerVoucherId = that.voucher.id;
			}
			//创建支付订单，后台会去判断优惠券是否能用，去计算抵扣后实际金额
		    that.ajax(that.url.createWxPayment, 'POST', data, function(resp) {
				let res = resp.data.result;
				let uuid = res.uuid;
				that.realPay = res.realPay;
				//此处应是微信支付接口调用,由于个人开发者无法使用，故模拟
				that.showPop();
			});
		    
		}
	},
	onLoad: function(options) {
		let that = this;
		let orderId = options.orderId;
		that.orderId = orderId;
		that.ajax(that.url.searchOrderById, 'POST', { orderId: orderId }, function(resp) {
			let result = resp.data.result;
			that.driverId = result.driverId;
			that.name = result.name;
			that.photo = result.photo;
			that.title = result.title;
			that.tel = result.tel;
			that.startPlace = result.startPlace;
			that.endPlace = result.endPlace;
			that.createTime = result.createTime;
			that.favourFee = result.favourFee;
			that.incentiveFee = result.incentiveFee;
			that.carPlate = result.carPlate;
			that.carType = result.carType;
			let status = result.status;
			that.status = status;
			if ([5, 6, 7, 8].includes(status)) {
				that.realMileage = result.realMileage;
				that.mileageFee = result.mileageFee;
				that.waitingFee = result.waitingFee;
				that.waitingMinute = result.waitingMinute;
				that.returnFee = result.returnFee;
				that.returnMileage = result.returnMileage;
				that.parkingFee = result.parkingFee;
				that.tollFee = result.tollFee;
				that.otherFee = result.otherFee;
				that.total = result.total;
				that.voucherFee = result.voucherFee;
			}
			that.baseMileagePrice = result.baseMileagePrice;
			that.baseMileage = result.baseMileage;
			that.exceedMileagePrice = result.exceedMileagePrice;
	
			that.base_minute = result.baseMinute;
			that.exceedMinutePrice = result.exceedMinutePrice;
			that.baseReturnMileage = result.baseReturnMileage;
			that.exceedReturnPrice = result.exceedReturnPrice;
			that.realPay = '--';
			if ([2, 3].includes(status)) {
				that.img = '../../static/order/icon-1.png';
			} else if ([4].includes(status)) {
				that.img = '../../static/order/icon-2.png';
			} else if ([5, 6].includes(status)) {
				that.img = '../../static/order/icon-3.png';
			} else if ([7].includes(status)) {
				that.img = '../../static/order/icon-4.png';
				that.realPay = result.realPay;
			} else if ([8, 9, 10, 11, 12].includes(status)) {
				that.img = '../../static/order/icon-5.png';
				that.realPay = result.realPay;
			}
			that.customerComment.value = result.comment.rate;
			if (result.comment.hasOwnProperty('remark')) {
				that.customerComment.remark = result.comment.remark;
			}
			if (result.hasOwnProperty('voucher')) {
				//能使用的代金券列表
				let voucherList = result.voucher;
				//默认取最佳
				that.useVoucher.id = voucherList[0].id;
				that.useVoucher.discount = voucherList[0].discount;
				that.useVoucher.voucherId = voucherList[0].voucherId;
			}
		});
	}
};
</script>

<style lang="less">
@import url('order.less');
</style>
